<!DOCTYPE html>
<html lang="en-us">

<head>
    <title>民生优惠券</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" href="favicon.ico" />
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <link href="css/font-awesome.min.css" rel="stylesheet" />
    <link href="css/default.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap/bootstrap.min.js"></script>
    <script src="js/bootstrap/bootstrap-table.min.js"></script>
    <script src="js/bootstrap/bootstrap-table-zh-CN.min.js"></script>
    <!--[if lt IE 9]>
    <script src="js/bootstrap/html5shiv.min.js"></script>
    <script src="js/bootstrap/respond.min.js"></script>
    <![endif]-->
    <!--页面加载进度条-->
    <link href="css/pace/dataurl.css" rel="stylesheet" />
    <script src="js/pace/pace.min.js"></script>
    <script src="js/jquery.scrolltopcontrol/scrolltopcontrol.js" type="text/javascript"></script>
    <script src="js/jquery.extend.js" type="text/javascript"></script>
    <script src="js/default.js" type="text/javascript"></script>
    <script src="js/jqueryrotate.js" type="text/javascript"></script>

    <!-- artTemplate 模板引擎 -->
    <script src="js/template-web.js" type="text/javascript"></script>
    <script src="pagejs/coupon-detail.js" type="text/javascript"></script>
    <link href="pagecss/coupon-detail.css" rel="stylesheet" />
</head>

<body>
<div class="maincontent" style="overflow-x: scroll;">
    <!--我是主要内容-->
    <div class="content-wrapper" style="padding: 0 16px">
        <div class="content-section">
            <h3>基本信息</h3>
            <hr>
            <div class="address-info">
                <div class="address" style="display:inline-block">
                    <span>常住地：</span>
                    <span id="person-address" style="color:rgba(0,0,0,.45)"></span>
                </div>
                <div class="person-type" style="display:inline-block;margin-left:50px">
                    <span>免费类型：</span>
                    <span id="person-type" style="color:rgba(0,0,0,.45)"></span>
                </div>
            </div>
        </div>
        <div class="content-section">
            <h3>证件信息</h3>
            <hr>
            <div class="idcard-infos" style="overflow-x: scroll;">
                <div class="idcard-list">
                </div>
            </div>
        </div>
        <div class="content-section">
            <h3>免费券信息</h3>
            <hr>
            <div class="coupon-infos">
                <div class="coupon-list">
                </div>
            </div>
        </div>
    </div>
    <div id="zoom-img-wrapper">
        <div id="zoom-img">
            <img id="ic-photo"/>
            <span class="glyphicon glyphicon-repeat" aria-hidden="true" id="ic-rotate"></span>
            <span class="closed">X</span>
        </div>
    </div>
    <a href="#top" id="goTop">
        <i class="fa fa-angle-up fa-3x"></i>
    </a>
</div>
<!-- 优惠券列表渲染 -->
<script id="coupon-list" type="text/html">
    {{each rows item i}}
    <div class="coupon-item">
        <div class="icon-wrapper">
            <img src="{{item.couponImg}}" title="{{item.couponName}}" alt="{{item.couponName}}"/>
        </div>
        <div class="operate-btns">
            <button type="button" class="btn btn-primary" onclick="agree('{{item.couponNum}}')">同意领取</button>
            <button type="button" class="btn btn-default" onclick="disAgree('{{item.couponNum}}')">不同意</button>
        </div>
    </div>
    {{/each}}
</script>
<script id="photo-list" type="text/html">
    {{each rows item i}}
    <div class="idcard-item">
        <img src="data:image/jpeg;base64,{{item.photoUrl}}" alt="{{item.name}}" class="idcard-photo" onclick="zoomImg('{{item.photoUrl}}')">
        <div class="idcard-type">{{item.name}}</div>
    </div>
    {{/each}}
</script>
<script>
    var screenW=document.documentElement.clientWidth;

    //大图预览
    function zoomImg(photoUrl) {
        $("#zoom-img > img").prop('src','data:'+'image/jpeg'+';base64,'+photoUrl);
        $("body").attr("style", "overflow: hidden;");
        $("#zoom-img-wrapper").show();
        $("#zoom-img").show(500);
    }
    //判断不同分辨率设备显示不一样的大小
    if(screenW > 768){
        $("#zoom-img").css({"width":"45%","height":"55%","margin":"10% 27%"});
    }

    //旋转图片
    var angle = 0;
    $("#ic-rotate").bind("click", function (event) {
        event.stopPropagation();
        $("#ic-photo").rotate({
            angle: angle,
            animateTo: angle + 90,
            duration: 300,
            callback: function () { angle += 90 }
        });
    });

    $("#zoom-img-wrapper").bind("click", function (event) {
        event.stopPropagation();
    })
    $("#zoom-img-wrapper .closed ").bind("click", function (event) {
        event.stopPropagation();
        $("#zoom-img").hide(500)
        setTimeout(() => {
            $("#zoom-img-wrapper").hide()
            $("body").removeAttr("style")
        }, 500);
        $("#ic-photo").rotate({
            angle: 0,
            animateTo: 0,
            duration: 300,
            callback: function () { angle += 0 }
        });
    });
    //退出登录
    function logout() {
        $.ajax({
            url: '/csfy/dologout.do',
            method: 'POST',
            success: function (res) {
                if (JSON.parse(res).code == 200) {
                    window.location.href = "/csfy/index.do"
                }
            }
        })
    }

    //获取当前登录用户信息
    $(document).ready(function () {
        $.ajax({
            method: 'POST',
            url: '/csfy/intf.do',
            data: { method: 'getLoginUserInfo' },
            success: res => {
                if (res.code == 10086) {
                    alert("请重新登录！");
                } else {
                    if (res.code == 200) {
                        $(".username").html(res.rows.userName);
                    }
                }
            }
        })
    })
    function getJsonFromUrl() {
        var query = location.search.substr(1);
        var result = {};
        query.split("&").forEach(function (part) {
            var item = part.split("=");
            result[item[0]] = decodeURIComponent(item[1]);
        });
        return result;
    }

    var id = getJsonFromUrl().id;
    if (!id) {
        window.location.href = "/csfy/static/manage-sys/coupon-review.html"
    } else {
        //优惠类型
        function getPersonType(type) {
            type = parseInt(type);
            if (isNaN(type)) {
                return '其他免费类型';
            }
            if (type === 1) {
                return '本人为长沙户口';
            } else if (type === 2) {
                return '配偶为长沙户口';
            } else if (type === 3) {
                return '长沙居住证';
            } else if (type === 4) {
                return '军人及军人配偶';
            } else if (type === 5) {
                return '其他免费类型';
            }
        }

        function agree(couponNum) {
            console.log(couponNum)
            var isAgree = confirm('确认同意领取？');
            if (isAgree) {
                $.ajax({
                    url: '/csfy/intf.do',
                    method: 'POST',
                    data: { method: 'updateCouponInfo', couponNum: couponNum, status: '1' },
                    success: function () {
                        alert('操作完成');
                        window.location.reload();
                    },
                    error: function (msg) {
                        alert(msg);
                    }
                });
            }
        }

        function disAgree(couponNum) {
            console.log("不同意")
            var isAgree = confirm('确认不同意领取？');
            if (isAgree) {
                $.ajax({
                    url: '/csfy/intf.do',
                    method: 'POST',
                    data: { method: 'updateCouponInfo', couponNum: couponNum, status: '-1' },
                    success: function () {
                        alert('操作完成');
                        window.location.reload();
                    },
                    error: function (msg) {
                        alert(msg);
                    }
                });
            }
        }

        //图片脱敏 获取图片
        function getPicByGc(paramUrl){
            var base64Pic = '';
            $.ajax({
                url:'/csfy/coupon/getPicForGc.do',
                type:'GET',
                data:{fileName:paramUrl},
                dataType: 'json',
                async:false,
                success:function (data) {
                    base64Pic = data;
                }
            });

            return base64Pic;
        }

        //TODO 获取详情信息
        $.ajax({
            url: '/csfy/intf.do',
            method: 'POST',
            data: { method: 'getDetailPresonInfo', id: id },
            success: function (res) {
                console.log('res-->'+res);
                if (res.code == 200 && res.rows) {

                    $("#person-address").html(res.rows.address);
                    $("#person-type").html(getPersonType(res.rows.presonType));
                    var data = { rows: [] };
                    if (res.rows.cardFrontImgUrl) {
                        data.rows.push({
                            photoUrl: getPicByGc(res.rows.cardFrontImgUrl),
                            name: '身份证'
                        })
                    }
                    if (res.rows.marriageImgUrl) {
                        data.rows.push({
                            photoUrl: getPicByGc(res.rows.marriageImgUrl),
                            name: '结婚证'
                        })
                    }
                    if (res.rows.cardMateImgUrl) {
                        data.rows.push({
                            photoUrl: getPicByGc(res.rows.cardMateImgUrl),
                            name: '丈夫身份证'
                        })
                    }
                    if (res.rows.officerImgUrl) {
                        data.rows.push({
                            photoUrl: getPicByGc(res.rows.officerImgUrl),
                            name: '军官证'
                        })
                    }
                    if (res.rows.residencePermitImgUrl) {
                        data.rows.push({
                            photoUrl: getPicByGc(res.rows.residencePermitImgUrl),
                            name: '居住证'
                        })
                    }
                    if (res.rows.familyRegisterImgUrl) {
                        data.rows.push({
                            photoUrl: getPicByGc(res.rows.familyRegisterImgUrl),
                            name: '户口本'
                        })
                    }


                    $(".idcard-list").html(template('photo-list', data));

                    var couponList = '';
                    var data1 = { rows: [] }
                    if (res.rows.couponInfos && res.rows.couponInfos.length && res.rows.couponInfos.length > 0) {
                        res.rows.couponInfos.map(item => {
                            if(item.status == 0){
                                var couponNum = item.couponNum;
                                couponList += '<div class="coupon-item"><div class="name">' + item.couponName + '<button type="button" class="btn btn-primary" style="margin: 0 40px" onclick="agree('+"'"+couponNum+"'"+')">同意领取</button><button type="button" class="btn btn-default" onclick="disAgree('+"'"+couponNum+"'"+')">不同意</button>' + '</div><div class="desc">' + item.couponDesc + '</div></div>'
                            }
                        })
                    }
                    $(".coupon-list").html(couponList);
                } else {
                    alert('获取用户免费券信息失败，请稍后重试');
                    window.location.href = "/csfy/static/manage-sys/coupon-review.html"
                }
            },
            error: function (msg) {
                alert(msg);
                window.location.href = "/csfy/static/manage-sys/coupon-review.html"
            }
        })
    }
</script>
</body>

</html>